<template>
	<view class="address">
		<view v-show="userAddressInfo.AddressList.length==0">您还没有添加地址</view>
		<view class="addres-content" v-for="(item,index) in userAddressInfo.AddressList" :key="index">
			<view @click="selectAddress(item)" class="select-address">
				<view class="content-name-phone">
					<view class="name">{{item.name}}</view>
					<view class="phone">{{item.phone}}</view>
				</view>
				<view class="content-address">{{item.city}}{{item.address}}</view>
			</view>
			<view class="hr"></view>
			<view class="content-edit">
				<view class="is-default">
					<up-checkbox label="设置为默认地址" shape="circle" size="12" usedAlone :checked="item.isDefault===0"
						@change="isDefaultAddress(index,item.isDefault)">
					</up-checkbox>
				</view>
				<view class="delete-address" @click="deleteAddress(item.id,index)">删除</view>
				<view class="edit-address" @click="editAddress(item)">编辑</view>
			</view>
		</view>
	</view>
	<view class="add-Address" @click="add_address">添加新地址</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		useUserStore,
		useUserAddressStore
	} from '@/store/index';
	import {
		post,
		baseUrl
	} from '/hooks/req.js';
	import {
		get
	} from '../../hooks/req';
	const ifSelect = ref(false)
	//用户信息
	let useUserInfo = useUserStore()
	let userAddressInfo = useUserAddressStore()
	const addressData = ref([])
	const add_address = () => {
		uni.navigateTo({
			url: '/pages/addUserAddress/addUserAddress'
		})
	}
	const selectAddress = (e) => {
		if (ifSelect.value) {
			uni.$emit('selectAddressData', JSON.stringify(e))
			uni.navigateBack()
		}
	}
	//设置默认地址
	const isDefaultAddress = (index, isDefault) => {
		const values =ref()
		if (isDefault == 0) {
			 values.value = userAddressInfo.AddressList[index]
			 values.value.isDefault=1
		} else {
			 values.value = userAddressInfo.AddressList[index]
			userAddressInfo.AddressList.forEach((item, i) => {
				item.isDefault = i == index ? 0 : 1
			})
		}
		post("/address/isDefault", values.value, uni.getStorageSync("token")).then(res => {
			userAddressInfo.loadAddressList()
		})
	}
	//删除地址
	const deleteAddress = (id, index) => {
		uni.showModal({
			content: "您确定要删除这个地址吗?",
			success(res) {
				if (res.confirm) {
					post("/address/delete", id, uni.getStorageSync("token")).then(res => {
						userAddressInfo.AddressList.splice(index, 1);
					})
				}
			}
		})

	}
	//编辑地址
	const editAddress = (item) => {
		uni.navigateTo({
			url: '/pages/addUserAddress/addUserAddress?editData=' + JSON.stringify(item)
		})
	}

	onShow(() => {
		userAddressInfo.loadAddressList()
	})
	onLoad((e) => {
		userAddressInfo.loadAddressList()
		if (e.select) {
			ifSelect.value = true
			uni.setNavigationBarTitle({
				title: '选择收货地址'
			})
		}

	})
</script>

<style scoped lang="scss">
	.address {
		padding: 10px;
		height: 95vh;
		background-color: #efefef;

		.addres-content {
			padding: 10px;
			background-color: #fff;
			border-radius: 5px;
			font-size: 12px;
			color: #888888;
			margin-bottom: 10px;

			.select-address {
				.content-name-phone {
					display: flex;
					font-size: 14px;
					color: black;

					.name {
						margin-right: 5px;
						margin-bottom: 5px;
					}
				}
			}


			.hr {
				margin: 5px 0;
				height: 1px;
				background-color: #ededed;
			}

			.content-edit {
				color: #888888;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				.delete-address {
					margin-left: 150px;
				}
			}
		}

	}

	.add-Address {
		width: 90%;
		height: 30px;
		line-height: 30px;
		background-color: #ff6700;
		border-radius: 20px;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 10px;
		color: white;
	}
</style>